<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>



  <!-- 【按钮】 -->
      <button class="">初始化</button>
      <button class="btn btn-success btn-lg">success</button>
      <!-- 大按钮btn-lg -->
      <button class="btn btn-default btn-sm">default</button>
      <!-- 小按钮  btn-sm -->
      <button class="btn btn-primary btn-block">primary</button>
      <!-- 沾满父元素 -->
      <button class="btn btn-info active">info</button>
      <!-- active被选中的样式 -->
      <button class="btn btn-warning" disabled="disabled">warning</button>
      <!-- disabled -->
      <button class="btn btn-danger">danger</button>

      <a href="" class="btn btn-danger" title="">a标签</a>

      <!-- 【role】
      增强语义化
       -->
      <!-- 【】 -->
        <form role = "form">
                <div class="form-group col-lg-3 form-horizontal">
                    <label for = "idCard" class="control-label col-lg-5">身份证号：</label>
                    <div class="col-lg-7">
                        <input type = "text" id = "idCard" class="form-control">
                    </div>
                </div>
        </form>
      <!-- 【tabindex】 -->
        <!--  -->
          <a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br />
          <a href="http://www.google.com/" tabindex="1">Google</a><br />
          <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

          <p><b>注释：</b>请尝试使用键盘上的 "Tab" 键在链接之间进行导航。</p>
        <!-- 自定义属性 -->
        <div id = "user" data-uid = "12345" data-uname = "愚人码头" > </div>
          <!--
       // 使用getAttribute获取 data- 属性
          var user = document . getElementById ( 'user' ) ;
          var userName = plant . getAttribute ( 'data-uname' ) ; // userName = '愚人码头'
          var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'

          // 使用setAttribute设置 data- 属性
          user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;

         -->


          <!-- 这并不是最好的用法 -->
          <div id = "user" uid = "12345" uname = "愚人码头" > </div>
          <script>
          // 使用getAttribute获取 data- 属性
          var user = document . getElementById ( 'user' ) ;
          var userName = plant . getAttribute ( 'uname' ) ; // userName = '愚人码头'
          var userId = plant . getAttribute ( 'uid' ) ; // userId = '12345'

          // 使用setAttribute设置 data- 属性
          user . setAttribute ( 'site' , 'http://www.css88.com' ) ;
          </script>


          <!-- *******重要的用法****** -->
          <div id="user" data-id="1234567890" data-name="愚人码头" data-date-of-birth>码头</div>
          <script type="text/javascript">
          var el = document.querySelector('#user');
          console.log(el.id); // 'user'
          // 这种方式通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素 data- 属性的DOMStringMap对象
          console.log(el.dataset);//一个DOMStringMap
          console.log(el.dataset.id); // '1234567890'
          console.log(el.dataset.name); // '愚人码头'
          console.log(el.dataset.dateOfBirth); // ''
          // 不用写前缀了，而且如果后面有连字符-就改用驼峰式书写
          el.dataset.dateOfBirth = '1985-01-05'; // 设置data-date-of-birth的值.
          console.log('someDataAttr' in el.dataset);//false
          el.dataset.someDataAttr = 'mydata';
          console.log('someDataAttr' in el.dataset);//true
          </script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  </body>
</html>